<template>
  <div>
    <el-card class="box-card">
      <el-button
        style="float: right"
        @click="dialogFormVisible = true, typeStatus = false"
        size="small"
        icon="el-icon-edit"
        type="success">添加菜单</el-button>
      <el-table
        :data="menuList"
        row-key="id"
        :tree-props="{children: 'childs', hasChildren: 'hasChildren'}"
        default-expand-all
        style="width: 100%">
        <el-table-column
          prop="title"
          label="标题"
          width="200">
          <template v-slot="{row}">
            <i v-if="row.pid === null" class="el-icon-folder-opened"></i>
            <i v-else-if="!row.is_point" class="ivu-icon fa fa-file-o fa-fw"></i>
            <i v-else class="ivu-icon el-icon-view"></i>
            {{row.title}}
          </template>
        </el-table-column>
        <el-table-column
          prop="code"
          label="权限点代码">
        </el-table-column>
        <el-table-column
          prop="address"
          width="120"
          align="center"
          label="操作">
          <template v-slot="{row}">
            <el-button @click="onEditmenu(row)" size="small" class="Edit" icon="el-icon-edit" circle></el-button>
            <el-button @click="onDelmenu(row)" size="small" class="Delete" icon="el-icon-delete" circle></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
<!--    <MenuAdd :menuList="menuList" :dialogVisible.sync="dialogVisible"></MenuAdd>-->
    <MenuAdd v-if="dialogFormVisible" @updateList="getMenuList" :rowId.sync="rowId" :typeStatus="typeStatus" :PermissionGroupsList="menuList" title="创建" pageTitle="菜单" :dialogFormVisible.sync="dialogFormVisible"></MenuAdd>
  </div>
</template>

<script>
import { list, remove } from '../../api/base/menus'
import MenuAdd from '../components/menu-add'
export default {
  data () {
    return {
      menuList: [],
      dialogFormVisible: false,
      typeStatus: false,
      rowId: {}
    }
  },

  created () {
    this.getMenuList()
  },

  methods: {
    async getMenuList () {
      const res = await list()
      this.menuList = res.data
      this.menuList = res.data.map(item => {
        if (item.points && item.points.length) {
          item.childs = item.points
        }
        if (item.childs && item.childs.length) {
          item.childs.forEach(it => {
            if (it.points && it.points.length) {
              it.childs = it.points
            }
          })
        }
        return item
      })
    },
    onEditmenu (row) {
      this.dialogFormVisible = true
      this.typeStatus = true
      this.rowId = row
    },
    async onDelmenu (row) {
      await remove(row)
      this.$message.success('删除成功')
      this.getMenuList()
    }
  },
  components: {
    MenuAdd
  }
}
</script>

<style scoped lang='less'>
.box-card {
  margin: 20px;
  .Edit{
    background: #ecf5ff;
    color: #409eff;
    border-color: #b3d8ff;
    &:hover{
      background: #409eff;
      color: #fff;
    }
  }
  .Delete {
    background: #fef0f0;
    color: #f56c6c;
    border-color: #fbc4c4;
    &:hover{
      background: #f56c6c;
      color: #fff;
    }
  }
  /deep/ .el-table__expand-icon{
    display: none;
  }
  /deep/ .el-table__header-wrapper {
    margin-top: 15px;
  }
  /deep/ .el-table__row--level-0 {
    height: 60px;
  }
}
</style>
